<template>
  <!-- 添加投诉 -->
  <el-dialog title='添加投诉工单' :visible.sync="ComplaintVisible" width="35%" class="complainmain" :show-close="false">
    <el-form ref="complaintAdd" :model="complaintAdd" label-width="130px" class="complaint_main complainmain-main" :rules="refundrules">
      <el-form-item label="后台单号" prop="xmbzNo" :rules="[{
          required: !complaintAdd.platformNo,
          message: '后台单号为空',
          trigger: 'blur',
        }]">
        <el-input v-model.trim="complaintAdd.xmbzNo" size="small" style="width:200px" maxlength="30" onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g, '').slice(0,30)" onafterpaste="value=value.replace(/[^\a-\z\A-\Z0-9]/g, '').slice(0,30)" placeholder="请输入后台单号" @blur="handleBlurSearch({key: 'xmbzNo', value: complaintAdd.xmbzNo})"></el-input>
        <span class="ml-5">{{ cityName }}</span>
      </el-form-item>
      <el-form-item label="平台单号" prop="platformNo" :rules="[{
          required: !complaintAdd.xmbzNo,
          message: '平台单号为空',
          trigger: 'blur',
        }]">
        <el-input v-model.trim="complaintAdd.platformNo" maxlength="30" style="width:200px" size="small" onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g, '').slice(0,30)" onafterpaste="value=value.replace(/[^\a-\z\A-\Z0-9]/g, '').slice(0,30)" placeholder="请输入平台单号" @blur="handleBlurSearch({key: 'platformOrderId', value: complaintAdd.platformNo})"></el-input>
      </el-form-item>
      <!-- 添加投诉工单 -->
      <el-form-item label="部门失误类型">
        <XmCascader size="small" clearable v-model="selectList" :options="errorTypeList" separator=">" placeholder="请选择部门失误类型" style="width: 280px;" :props="{multiple: true, checkStrictly: true}" filterable></XmCascader>
      </el-form-item>

      <el-form-item label="投诉等级" prop="complaintLevel">
        <ComplaintLevelSelect v-model="complaintAdd.complaintLevel" style="width: 150px;margin-right:10px"></ComplaintLevelSelect>
      </el-form-item>
      <el-form-item label="投诉渠道" prop="complaintChannel">
        <ComplaintChannelSelect v-model="complaintAdd.complaintChannel" @change="onComplaintChannelChange" style="width: 150px;margin-right:10px"></ComplaintChannelSelect>
      </el-form-item>
      <el-form-item label="责任人" prop="personLiable">
        <el-input v-model.trim="complaintAdd.personLiable" size="small" style="width:200px" placeholder="请输入责任人"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input onkeyup="value=value.replace(/[^\-?\d.]/g,'')" onafterpaste="value=value.replace(/[^\-?\d.]/g,'')" v-model.number="complaintAdd.phone" style="width:200px" size="small" maxlength="11" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="投诉内容" prop="complaintContent">
        <el-input type="textarea" v-model.trim="complaintAdd.complaintContent" size="small" maxlength="500" show-word-limit :autosize="{ minRows: 4, maxRows:6}" placeholder="投诉内容"></el-input>
      </el-form-item>
      <el-form-item label="处理结果">
        <el-input type="textarea" v-model.trim="complaintAdd.processingResults" size="small" maxlength="250" show-word-limit :autosize="{ minRows: 4}" placeholder="处理结果"></el-input>
      </el-form-item>

      <el-form-item label="图片附图:" prop="title">
        <div style="margin-bottom: 15px;">
          <el-upload action="/api/xmbz-goods/file/upload" :data="{tag:'complaint'}" list-type="picture-card" :on-success="addabnormalSuccess" :limit="10" :file-list="addAbnormalForm.pics" :on-remove="addabnormalRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" size="small" @click="handleAddcomplaint('complaintAdd',0)">添加</el-button>
        <el-button @click="handlecomplaintResetForm()" size="small">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {
  getComplaintLevelList, //投诉等级列表
  addWorkOrderComplaint,
  getComplaintChannelList,
} from "@/api/workorder"
import { prodComplaintTem } from '@/const'
import {
  orderList, // 查询
} from "@/api/pending";

export default {
  props: {
    errorTypeList: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      ComplaintVisible: false,
      complaintAdd: {
        xmbzNo: "", //订单号
        platformNo: "", //第三方
        responsibleDepartment: "", //责任部门
        departmentErrorType: "", //失误类型
        complaintLevel: "", //等级
        complaintChannel: "", //渠道
        personLiable: "", // 责任人
        phone: "", //手机号
        compensationMethod: [], //赔偿方式
        refundAmount: "", //退款金额
        damages: "", //诚意金
        complaintContent: "", //投诉内容
        processingResults: "", //处理结果
        complainState: "4" // 处理状态
      },
      cityName: '',
      refundrules: {
        xmbzNo: [
          {
            required: true,
            message: "后台单号为空",
            trigger: "blur"
          },
          {
            pattern: /^[0-9a-zA-Z]+$/,
            message: "后台单号为数字字母混合",
            trigger: "blur"
          }
        ],
        platformNo: [
          {
            required: true,
            message: "平台单号为空",
            trigger: "blur"
          },
          {
            pattern: /^[0-9a-zA-Z]+$/,
            message: "后台单号为数字字母混合",
            trigger: "blur"
          }
        ],
        responsibleDepartment: [
          {
            required: true,
            message: "请选择部门",
            trigger: "change"
          }
        ],
        complaintLevel: [
          {
            required: true,
            message: "请选择投诉等级",
            trigger: "change"
          }
        ],
        complaintChannel: [
          {
            required: true,
            message: "请选择投诉渠道",
            trigger: "change"
          }
        ],
        personLiable: [
          {
            required: true,
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur"
          },
          {
            pattern: 11 && /^((12|13|14|15|16|17|18)[0-9]{1}\d{8})$/,
            message: "手机号格式不正确",
            trigger: "blur"
          }
        ],
        damages: [
          {
            required: true,
            message: "请输入诚意金",
            trigger: "change"
          }
        ],
        refundAmount: [
          {
            required: true,
            message: "请输入退款金额",
            trigger: "change"
          }
        ],
        complaintContent: [
          {
            required: true,
            message: "请输入投诉内容",
            trigger: "change"
          }
        ],
      },
      selectList: [],  // 显示内容的数组
      addAbnormalForm: {    // 添加投诉图片数组
        pics: []
      },
      configTips: null,
    };
  },
  methods: {
    show() {
      this.handlAddcomplaint()
      this.ComplaintVisible = true
    },
    handlAddcomplaint () {
      //添加投诉
      for (let key in this.complaintAdd) {
        this.complaintAdd[key] = ''
      }
      if (this.$refs['complaintAdd']) {
        this.$refs['complaintAdd'].resetFields()
      }
      this.cityName = ''
    },
    //  添加投诉图片列表
    addabnormalSuccess (response) {
      this.addAbnormalForm.pics.push({
        url: response.data
      })
    },
    //  删除投诉图片列表
    addabnormalRemove (index) {
      this.addAbnormalForm.pics.map((item, ids) => {
        if (item.uid == index.uid) {
          this.addAbnormalForm.pics.splice(ids, 1)
        }
      })
    },
    handleAddcomplaint () {
      // 投诉工单
      this.$refs['complaintAdd'].validate(valid => {
        if (valid) {
          let arr = []
          let regexp = ''
          this.addAbnormalForm.pics.map((item) => {
            arr.push(item.url)
          })
          regexp = this.selectList.map(item => item[item.length - 1]).join(',') || ''
          // if (!regexp) {
          //   this.$message({
          //     type: "warning",
          //     message: "请选择部门失误类型!"
          //   })
          //   return false
          // }
          const complaintData = {
            compensationMethod: this.acTiveArrStringFun(
              this.complaintAdd.compensationMethod
            ),
            complaintChannel: this.complaintAdd.complaintChannel,
            complaintContent: this.complaintAdd.complaintContent,
            complaintLevel: this.complaintAdd.complaintLevel,
            edamages: this.complaintAdd.damages,
            departmentErrorType: this.complaintAdd.departmentErrorType,
            personLiable: this.complaintAdd.personLiable,
            phone: this.complaintAdd.phone,
            platformNo: this.complaintAdd.platformNo,
            processingResults: this.complaintAdd.processingResults,
            refundAmount: this.complaintAdd.refundAmount,
            responsibleDepartment: '',
            xmbzNo: this.complaintAdd.xmbzNo,
            handleState: this.complaintAdd.complainState,
            extJson: JSON.stringify({ 'img': arr }),
            responsibleDepartmentError: regexp || undefined
          }

          addWorkOrderComplaint(complaintData).then(() => {
            this.$message({
              type: "success",
              message: "提交成功!"
            })
            this.$emit('getList')
            this.ComplaintVisible = false
          })
        } else {
          this.$message({
            type: "warning",
            message: "填写相关提交内容!"
          })
          return false
        }
      })
    },
    onComplaintChannelChange(value) {
      if (value === 9) { // 生产群
        this.complaintAdd.complaintContent = prodComplaintTem
      }
    },
    handlecomplaintResetForm () {
      this.ComplaintVisible = false
    },
    acTiveArrStringFun (obj) {
      var arr = []
      if (obj != null && obj.length != 0) {
        for (var i = 0; i < obj.length; i++) {
          arr.push(obj[i])
        }
      }
      return arr.toString()
    },
    handleBlurSearch({key, value}) {
      if (!value) {
        return
      }
      const params = {
        orderTimeSort: 0, // 下单时间排序
        deliveryTimeSort: 0, // 配送时间排序
      }
      params[key] = value
      orderList(params).then(res => {
        if (res.data.code === 200) {
          const data = res.data.data && res.data.data.rows && res.data.data.rows[0]
          if (data) {
            this.$notify({
              title: '提示',
              message: '单号查询成功',
              type: 'success'
            });
            this.cityName = data.deptName
            this.complaintAdd.xmbzNo = this.complaintAdd.xmbzNo || data.xmbzNo
            this.complaintAdd.platformNo = this.complaintAdd.platformNo || data.platformOrderId
            this.complaintAdd.phone = this.complaintAdd.phone || data.bookerPhone
          } else {
            this.$notify({
              title: '提示',
              message: '查询不到该单号',
              type: 'error'
            });
          }
        }
      })
    }
  }
};
</script>
<style lang="scss" scoped>
 .complainmain {
  .complaint_main.complainmain-main {
    .el-form-item {
      margin-bottom: 20px !important;
    }
  }

  .el-form-item__label:before {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
  }
}
</style>